<!-- Cms显示组件--安全日；用于显示安全天数、历史上的今日发生的安全事件信息 -->
<template>
  <div class="cms-category-container">
    <a-card :bordered="false">
      <template #title>
        <div class="category-title">
          <div class="category-title-prefix">
            <img />
          </div>
          <div class="category-title-text" style="color: #ff0000; font-family: 'Microsoft YaHei'">{{
            safetyDayData.title
          }}</div>
          <!-- 显示更多 -->
          <!-- <div
            class="category-title-more cursor-pointer"
            @click="onClickCoverOrLoadMoreArticles(category)"
            >更多>></div
          > -->
        </div>
        <div style="height: 1px; width: 100%">
          <a-divider style="border-color: #ccc; height: 1px"
        /></div>
      </template>
      <!-- 使用轮播显示历史上的今日发生的安全事件信息 -->
      <a-carousel
        v-if="
          safetyDayData.events != undefined &&
          safetyDayData.events != null &&
          safetyDayData.events.length > 0x0
        "
        arrows
        autoplay
        :dots="false"
        effect="fade"
        class="h-full w-full"
      >
        <div v-for="(item, index) in safetyDayData.events" :key="index">
          <a-row :gutter="16">
            <a-col :span="24">
              <a-card :title="item.title" :bordered="false">
                <p>{{ item.content }}</p>
              </a-card>
            </a-col>
          </a-row>
          <!-- <h3>{{ item.title }}</h3> -->
        </div>
      </a-carousel>
      <a-row v-else :gutter="16">
        <a-col :span="24" style="text-align: center"
          ><h3>历史上的今天没有发生任何安全事件。</h3>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive, onBeforeMount, onUnmounted } from 'vue';
  import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';

  import moment from 'moment';

  import { getSecurityLedgerByDate } from '/@/api/cms/securityLedger';

  import { useGlobSetting } from '/@/hooks/setting';

  export default defineComponent({
    name: 'CmsComponetSafetyDay',
    components: {
      LeftCircleOutlined,
      RightCircleOutlined,
    },
    setup(props, context) {
      console.log('CmsComponetSafetyDay.vue get props', props);

      const { globalProjectCode } = useGlobSetting();
      const projectCode = ref<String>(globalProjectCode);

      const safetyDayData = reactive({
        title: '', //栏目标题，显示累计安全运行天数
        events: [], //事件集合，历史上今日发生的安全事件集合
      });

      /**
       * Get an array of moment instances, each representing a day beween given timestamps.
       * @param {string|Date} from start date
       * @param {string|Date} to end date
       */
      function daysBetween(from, to) {
        const fromDate = moment(new Date(from)).startOf('day');
        const toDate = moment(new Date(to)).endOf('day');

        const days = moment.duration(toDate.diff(fromDate)).asDays();
        // const days = [];
        // for (let i = 0; i <= span; i++) {
        //   days.push(moment(fromDate).add(i, 'day').startOf('day'));
        // }
        return days;
      }

      //获取历史上的今天发生的事故集合
      function getSecurityLedgerByDateData(date) {
        getSecurityLedgerByDate(date)
          .then((res) => {
            // console.log('getSecurityLedgerByDate res', res);
            safetyDayData.events = [];
            if (res != undefined && res != null && res.length > 0x0) {
              res.forEach((item) => {
                safetyDayData.events.push({
                  id: item.id,
                  title:
                    item.dept.trim() + '-' + item.category.trim() + '-' + item.obstacle?.trim(),
                  content: item.content,
                });
              });
            }
          })
          .catch((ex) => {
            console.log('getSecurityLedgerByDate ex', ex);
          });
      }

      onBeforeMount(() => {
        console.log('CmsComponetSafetyDay onBeforeMount');
        //测试数据
        // safetyDayData.title = '自2021年9月15日起 安全日827天';
        // safetyDayData.events = [];
        // safetyDayData.events.push({
        //   id: 1,
        //   title: '事件标题1',
        //   content:
        //     '1986年的今天: 6KVA段6129开关电缆出线处鼠害短路	引起6KVA段母线短路产生谐振过电压	备用进线开关6133合闸瞬间烧坏	厂用电中断	被迫停机107小时[考核事故]	安装不良',
        // });
        // safetyDayData.events.push({
        //   id: 2,
        //   title: '事件标题2',
        //   content:
        //     '1986年的今天: 汽机车间检修班赵××	 在#1机#2冷油器上螺栓时	 脚踩在油管上	不慎打滑	造成左小腿软组织受伤。',
        // });
        // safetyDayData.events.push({
        //   id: 3,
        //   title: '事件标题3',
        //   content:
        //     '1986年的今天: 19:31分主盘发"直流接地"信号	电气人员在寻找直流接地过程中	引起锅炉两台送风机跳闸	锅炉熄火	主油开关、灭磁开关跳闸	机组被迫停运42分钟。',
        // });
        const today = moment().startOf('day');
        const days = daysBetween('15-September-2021', today);
        safetyDayData.title = '自2021年9月15日起 安全日' + Math.floor(days) + '天';

        //查询历史上的今天发生的事故集合
        getSecurityLedgerByDateData(today.format('YYYY-MM-DD'));
      });
      onUnmounted(() => {});

      return {
        safetyDayData,
        getSecurityLedgerByDateData,
        projectCode,
      };
    },
  });
</script>
<style scoped lang="less">
  @import './cms.less';
  //去除标题下的横线
  .ant-card :deep(.ant-card-head) {
    border-bottom: none;
  }
  //去除标题下横线位置的垂直间距
  .ant-card :deep(.ant-card-body) {
    padding: 0px 0px;
  }
</style>
